<template>
     <div class="wrap" :style="{'width': width + 'px','height': height + 'px'}" ref="page">
        <canvas class="canvas" ref="canvas">
            浏览器不支持canvas
        </canvas>
        <canvas ref="labelCanvas"
            style="position : absolute; top : 0; left : 0"
        >
        </canvas>
        <canvas ref="markCanvas"
        style="position : absolute; top : 0; left : 0"
        @mousedown="onmousedown"
        @mousemove="onmousemove"
        @mouseup="onmouseup"
        >
        </canvas>

        <div v-show="tools.isShow" :style="{transform : 'translate('+ (tools.x * scale - 50) + 'px,' + (tools.y * scale + 4) +'px)'}" class="tools">
            <a-button @click="submit">提交</a-button>
        </div> 

        <canvas style="dispaly: none;visibility: hidden;" ref="outputCanvs"></canvas>
    </div>
</template>

<script>
export default {
    name : "page",
    props : {
        page : Promise,
        scale : Number
    },
    data(){
        return {
            width : 0,
            height : 0,
            isClick : false,
            location : {
                x1 : 0,
                y1 : 0,
                x2 : 0,
                y2 : 0
            },
            tools:{
                isShow : false,
                x : 0,
                y : 0
            },
            locations : []
        }
    },
    computed : {
      
    },
    mounted(){
        this.init()
    },
    created(){
    },
    methods:{
        init(){
            this.pageRendering == false
            this.page.then(page => {
                this.p = page
                this.render(page)
            })
        },
        getRatio(){
            const canvas = this.$refs.outputCanvs
            const context = canvas.getContext("2d");

            var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
            return devicePixelRatio / backingStoreRatio;

        },
        render(page){
            if(this.pageRendering){
                setTimeout(()=>{
                    this.render(page)
                },100)
                return false
            }
            this.pageRendering = true
            let ratio = this.getRatio()
            // if(this.scale >= 2){
            //     this.ratio = 1
            // }else{
            //     this.ratio = ratio
            // }
            this.ratio = ratio
           
            const canvas = this.$refs.canvas
            const context = canvas.getContext("2d");
            const viewport = page.getViewport({scale:this.scale * this.ratio});
              
            canvas.width = viewport.width
            canvas.height = viewport.height

            this.width = viewport.width / this.ratio;
            this.height = viewport.height / this.ratio;
            
            canvas.style.width = this.width  + 'px';
            canvas.style.height = this.height + 'px';
            
            const renderContext = {
                canvasContext: context,
                viewport: viewport  
            }
            var renderTask = page.render(renderContext)
            renderTask.promise.then(()=> {
                this.pageRendering = false;
            });

            
            const markCanvas = this.$refs.markCanvas
            markCanvas.width = this.width
            markCanvas.height = this.height

            const labelCanvas = this.$refs.labelCanvas
            labelCanvas.width = this.width
            labelCanvas.height = this.height

        },
        clear(){
           
        },
        onmousedown(e){
            this.isClick = true
            this.location.x1 = e.offsetX / this.scale
            this.location.y1 = e.offsetY / this.scale
            this.tools.isShow = false
        },
        onmousemove(e){
            if ( this.isClick ){
                this.location.x2 = e.offsetX / this.scale
                this.location.y2 = e.offsetY / this.scale

                this.sort(this.location.x1,this.location.x2)
                this.sort(this.location.y1,this.location.y2)

                let x = this.location.x1 * this.scale
                let y = this.location.y1 * this.scale
                let width = (this.location.x2 - this.location.x1) * this.scale
                let height = (this.location.y2 - this.location.y1) * this.scale
                
                // 绘制矩形框
                this.strokeRect(x,y,width,height)
            }
        },
        onmouseup(e){
            if(this.isClick){
                this.isClick = false
                if( Math.abs(this.location.x1 - e.offsetX / this.scale) < 10 || Math.abs(this.location.y1 - e.offsetY / this.scale) < 10 ){
                    this.clearMarkCanvas()
                    return
                }
                this.tools = {
                    isShow : true,
                    x : this.location.x2 ,
                    y : this.location.y2  ,
                }
            }
        },

        submit(){
            this.tools.isShow = false
            this.clearMarkCanvas()

            let ctx = this.$refs.outputCanvs.getContext("2d")
            let x = this.location.x1 
            let y = this.location.y1 
            let width = this.location.x2 - this.location.x1
            let height = this.location.y2 - this.location.y1

            this.$refs.outputCanvs.width = width * this.ratio * this.scale
            this.$refs.outputCanvs.height = height * this.ratio * this.scale

            ctx.drawImage(this.$refs.canvas, x * this.scale * this.ratio, y * this.scale * this.ratio, width * this.scale * this.ratio, height * this.scale * this.ratio, 0, 0, width * this.scale * this.ratio, height * this.scale * this.ratio)
            let imgBase64 = this.$refs.outputCanvs.toDataURL("image/png")

            // var oA = document.createElement("a")
            // oA.download = ''
            // oA.href = imgBase64
            // document.body.appendChild(oA)
            // oA.click()
            // oA.remove()  
            this.$emit("sumbit",this.p.pageNumber,this.location,imgBase64)

        },
        clearMarkCanvas(){
            let ctx = this.$refs.markCanvas.getContext('2d')
            ctx.clearRect(0,0,this.width,this.height)
            return ctx
        },
        strokeRect(x,y,width,height){
            let ctx = this.clearMarkCanvas()
            // ctx.strokeStyle = "red"
            // ctx.strokeRect(x,y,width,height)
            ctx.fillStyle = 'rgba(250,137,25,0.2)'
            ctx.fillRect(x,y,width,height)
            return ctx
        },
        drawAndSaveLabel(location){
            this.drawLabel(location)
            this.locations.push(location)
        },
        drawLabel(location){
            let ctx = this.$refs.labelCanvas.getContext("2d")
            ctx.strokeStyle = "green"
            let x = location.x1 * this.scale
            let y = location.y1 * this.scale
            let width = Math.abs(location.x2 - location.x1) * this.scale
            let height = Math.abs(location.y2 - location.y1) * this.scale

            // ctx.strokeRect(x, y, width, height)
            ctx.fillStyle = 'rgba(250,137,25,0.2)'
            ctx.fillRect(x,y,width,height)
        },
        drawLabels(){
            // console.log( this.locations)
            this.locations.forEach(location=>{
                this.drawLabel(location)
            })
        },
        clearLabelsCanvas(){
            let ctx = this.$refs.labelCanvas.getContext('2d')
            ctx.clearRect(0,0,this.width,this.height)
            return ctx
        },
        
        // 排序
        sort (x, y) {
            if ( x > y){
                let t = x;
                x = y;
                y = t;
            }
        }
    },
    watch:{
        // zoom更新的时候，要重新设置canvas的宽和高,并且重新绘制
        scale(){
            this.render(this.p)
            
            if(this.tools.isShow){
                let x = this.location.x1 * this.scale
                let y = this.location.y1 * this.scale
                let width = (this.location.x2 - this.location.x1) * this.scale
                let height = (this.location.y2 - this.location.y1) * this.scale
                
                // 绘制矩形框
                this.strokeRect(x,y,width,height)
            }
            if(this.locations.length > 0){
                 this.drawLabels()
            }
           
        },
    }
}
</script>

<style lang="stylus" scoped>
.wrap
    margin 10px
    position relative
    .canvas
        box-shadow 2px 3px 3px 2px rgba(100,100,102,0.3)
    .tools
        position absolute
        width: 40px;
        height: 30px;
        display flex;
        align-items center
        justify-content space-around
        top 0
        left 0
        background rgba(100,100,100,0.5)
        .ok
            cursor pointer
            font-weight 400
            &:hover
                font-weight 500
                
</style>